html {
  &.light {
    body {
      .vk-tag-panel {
        &.is-default {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: transparent;
          --el-tag-active-bg-color: transparent;
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: var(--el-border-color-lighter);
          --el-tag-hover-border-color: var(--el-border-color-extra-light);
          --el-tag-active-border-color: var(--el-border-color-extra-light);
        }

        &.is-card {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: transparent;
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: var(--el-border-color);
          --el-tag-hover-border-color: var(--el-color-primary);
          --el-tag-active-border-color: var(--el-color-primary);
        }

        &.is-smart {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: var(--el-color-primary-light-9);
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: transparent;
          --el-tag-hover-border-color: transparent;
          --el-tag-active-border-color: transparent;
        }

        &.is-smooth {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: var(--el-border-color-dark);
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-text-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: transparent;
          --el-tag-hover-border-color: transparent;
          --el-tag-active-border-color: transparent;
        }
      }
    }
  }

  &.dark {
    body {
      .vk-tag-panel {
        &.is-default {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: transparent;
          --el-tag-active-bg-color: var(--el-bg-color-page);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: var(--el-border-color-lighter);
          --el-tag-hover-border-color: var(--el-border-color-lighter);
          --el-tag-active-border-color: var(--el-border-color-lighter);
        }

        &.is-card {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: transparent;
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: var(--el-border-color);
          --el-tag-hover-border-color: var(--el-color-primary);
          --el-tag-active-border-color: var(--el-color-primary);
        }

        &.is-smart {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: var(--el-color-primary-light-9);
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: transparent;
          --el-tag-hover-border-color: transparent;
          --el-tag-active-border-color: transparent;
        }

        &.is-smooth {
          --el-tag-bg-color: transparent;
          --el-tag-hover-bg-color: var(--el-border-color-dark);
          --el-tag-active-bg-color: var(--el-color-primary-light-9);
          --el-tag-text-color: var(--el-text-color-primary);
          --el-tag-hover-text-color: var(--el-text-color-primary);
          --el-tag-active-text-color: var(--el-color-primary);
          --el-tag-border-color: transparent;
          --el-tag-hover-border-color: transparent;
          --el-tag-active-border-color: transparent;
        }
      }
    }
  }
}
